<script lang="ts" setup></script>

<template>
  <div class="Affix">
    <div class="border-b border-[#EDEFF4]">
      <li code="zoomOut">
        <i class="iconfont icon_enlarge" title="放大"></i>
      </li>
      <li code="autoZoom">
        <i class="iconfont icon_huanyuan" title="居中"></i>
      </li>
      <li code="zoomIn">
        <i class="iconfont icon_cutdown" title="缩小"></i>
      </li>
    </div>
    <div>
      <li code="move">
        <i class="iconfont icon_move" title="移动"></i>
      </li>
      <li code="kuangxuan">
        <i class="iconfont icon_kuangxuan" title="框选"></i>
      </li>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Affix {
  // position: absolute;
  // right: 16px;
  // bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgb(13 22 50 / 10%);

  li {
    padding: 8px 0;
  }

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;

    i {
      padding-top: 8px;
      padding-bottom: 8px;
      color: #333;
    }
  }
}
</style>
